<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>E-hymn</title>

  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="pius.png" type="image/x-icon">
  <style>

  </style>
</head>
<body>
  <main>



    <section> 
      <div class="header">
        <img src="/pius.png" href="#default" class="logo"></img>
        <div class="header-right">
          <a class="active" href="/">Home</a>
          <a  href="inputs.html">Controls</a>
          <a href="changedetails.html">Change password</a>
        </div>
      </div>

      <header>
<h1>E-hymn</h1>

</header>
<div class="spacer"></div> 

      <div id="users">
        <input class="search"  placeholder="Search for hymns here"  />
       
        <ul class="list inactive"></ul>
      </div>
      <div class="spacer"></div>
  <form action="/hymns" method="post" >
    <div class="form-inputs">
    <input name="entrance" placeholder="entrance hymn number" />
    
    <input name="offertory" placeholder="offertory hymn number" />
   
    <input name="communion" placeholder="communion hymn number" />
   
    <input name="closing" placeholder="closing hymn number" />
    
  </div>
    <button type="submit" >Submit</button>
  
  </form>
  <br>
 
      
      
    </section>
  </main>

    <script src="list.min.js"></script>
  <script  src="index.js"></script>
</body>
</html>
